<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 600px;
            margin: 50px auto
        }

        .nav {
            display: flex;
            line-height: 40px;
            text-align: center;
        }

        .nav li {
            flex: 1;
            border: 1px solid #333;
        }

        /* .nav li:not(:first-child) {
            border-left: 0;
        } */

        .nav li+li {
            border-left: 0;
        }

        .active {
            background-color: #6ff;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="nav">
            <li>nav_01</li>
            <li>nav_02</li>
            <li>nav_03</li>
            <li>nav_04</li>
            <li>nav_05</li>
            <li>nav_06</li>
        </ul>
    </div>
</body>
<script>

    var nav = document.getElementsByClassName("nav")[0];
    var liList = nav.getElementsByTagName("li");  // [li,li,li,li,li,li]

    // 点谁 谁变红
    // 一个一个绑定 -> 太麻烦
    // liList[0].onclick = function () { }
    // liList[1].onclick = function () { }
    // liList[2].onclick = function () { }
    // liList[3].onclick = function () { }
    // liList[4].onclick = function () { }
    // liList[5].onclick = function () { }


    // 多元素绑定事件 -> 循环绑定 => 有问题 -> li和i都是最后一个

    // 解析:
    // 1. 页面加载时循环绑定事件,此时事件不会触发(事件点击才触发), 所有事件绑定完毕,全局的li变为:  <li>nav_06</li>  i变为:6 

    // 2. 元素被点击时 -> 指定绑定的函数 -> 函数作用域中没有li和i -> 向外跳一层找全局作用域 -> 全局作用域的li和i -> <li>nav_06</li>  :6 


    debugger;
    for (var i = 0; i < liList.length; i++) {  // i=> 0-5
        var li = liList[i];  //获取对应下标的元素
        // 页面加载时循环 -> 绑定事件->元素被点击时才会触发  
        li.onclick = function () {
            debugger;
            // JS中如果需要同时设置多个样式  -> 一条一条设置比较麻烦 => 一般会将多个css属性提取到style中 定一个class名
            // li.style.backgroundColor = "#6ff";
            // li.style.color = "#fff";

            // li.className = "active";

            console.log(li, i);

        }
    }

    console.log("循环结束", li, i); // 6




</script>

</html>